<template>
  <div class="bookcontainer" :style="{'background-image':'url('+img+')'}"
       style="background-size: 2000000% 200000%;background-position: 1080px 1700px;">
    <div class="BookShelf">
      <!--<div class="BookShelf">-->
      <div class="imgs">
        <img :src="img" alt="">
      </div>
      <div class="tests">
        <div class="nickname">
          <img :src="items.vip_info.avatar" alt="">
        </div>
        <div class="name">
          {{items.vip_info.nickname}}
        </div>
      </div>
      <div class="nums">
        <div class="div">
          <div>{{items.vip_info.read_days}}</div>
          <div>阅读天数</div>
        </div>
        <div class="div">
          <div>{{items.vip_info.read_words}}</div>
          <div>阅读字数</div>
        </div>
      </div>

      <div class="qrimg">
        <img :src="items.qr_code" alt="">
      </div>
      <div class="foot" v-if="false">

      </div>
    </div>
  </div>
</template>

<script>
  import Json from '../../Json/CardBg'
  import {Toast} from 'mint-ui'

  export default {
    name: 'index',
    data: function () {
      return {
        Math: Math.floor(Math.random() * Json.length),
        // img: require('../../assets/img/CardBg/6copy.jpg'),
        img: '',
        items: {
          qr_code: '',
          vip_info: {}
        }
      }
    },
    mounted: function () {
      this.ShareCard(this.$route.query)
    },
    methods: {
      ShareCard: function (data) {
        data.pp_id = 1
        delete data.p_id
        this.$axios.achievement_card(data).then(res => {
          // var JS = {
          //   "share_id": "2253653",
          //   "pp_id": "1",
          //   "vip_token2": "1552620546860",
          //   "user_id": "1748204",
          //   "vip_token1": "e39c64801f85359493089d29e27e358",
          //   "share_token": "9bb558e0437dd9f56ab9912ed1a31b1b",
          //   "platform_id": "5",
          //   "vip_user_id": "1748204",
          //   "chapter_id": "1040",
          //   "p_id": "1"
          // }
          // sessionStorage.setItem('BookShelfParams', JSON.stringify(JS))
          // this.go('BookShelfNew')
          this.img = Json[this.Math].bg
          this.items = res.data.qing_data
          this.items.vip_info.read_words = this.items.vip_info.read_words >= 1000 ? (this.items.vip_info.read_words / 1000).toFixed(1) + 'K' : this.items.vip_info.read_words + ''
          // this.init()
          // this.canvasinit()
          res.data.qing_data.next_share_info.share_id = this.$route.query.share_id
          res.data.qing_data.next_share_info.share_token = this.$route.query.share_token
          this.Share(res.data.qing_data.next_share_info)
        })
      },
      Share: function (str) {
        var _this = this
        var obj = {}
        var data = {
          title: str.title,
          desc: str.desc,
          link: str.link,
          imgUrl: str.img
        }
        obj.share_id = str.share_id
        obj.share_token = str.share_token
        this.$wx.ShareTimeline(data, res => {
          obj.share_mode = res.share_mode
          obj.share_type = 21
          _this.share_done(obj)
        })
        this.$wx.ShareAppMessage(data, res => {
          obj.share_mode = res.share_mode
          obj.share_type = 21
          _this.share_done(obj)
        })
      },
      share_done: function (obj) {
        this.$axios.share_done(obj).then(res => {
          this.shares = false
          if (res.data.qing_code !== 100) {
            Toast({
              message: '打卡失败',
              iconClass: 'iconfont icon-bangdingshibai',
              duration: 5000
            })
          } else {
            Toast({
              message: '分享成功',
              iconClass: 'iconfont icon-tianjiachenggong',
              duration: 3000
            })
          }
        })
      },
      go: function (name, obj) {
        this.$router.push({
          name: name,
          query: obj || {}
        })
      },
    },
    components: {}
  }
</script>

<style scoped>
  @import "../../assets/css/views/BookShelf/index.css";

  img {
    width: 100%;
  }
</style>
